<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { PersonalizedItem } from "@/services/type"
import { useMusicStore } from "@/store"

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps<{
  title: string
  list: PersonalizedItem[]
}>()
const music = useMusicStore()
// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="playlist">
    <uni-section class="title" :title="title" type="line"></uni-section>
    <scroll-view class="list" scroll-x :show-scrollbar="false">
      <view
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="music.toPage('/pages/playlist/playlist', { id: item.id })"
      >
        <image :src="item.picUrl" mode="aspectFill"></image>
        <view class="text">{{ item.name }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.playlist {
  margin: 20rpx 0;
  :deep(.uni-section .uni-section-header__decoration) {
    background: #c84341 !important;
  }
}

.list {
  white-space: nowrap;
  .item {
    display: inline-block;
    width: 240rpx;
    margin: 0 20rpx;
    image {
      width: 240rpx;
      height: 240rpx;
      border-radius: $uni-border-radius-base;
    }
    .text {
      font-size: $uni-font-size-sm;
      line-height: 32rpx;
      height: 64rpx;
      width: 240rpx;
      overflow: hidden;
      white-space: wrap;
      text-wrap: wrap;
    }
  }
}
</style>
